/**
 * Created by bdbs on 2017/6/20.
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import style from '../style.scss';

class Subtitle extends Component {
  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
      time: 0,
      subtitleTime: 0,
      offsetTime: 0,
      selection: undefined,
    }
  }

  render() {
    return (
      <div>
        <div>
          <div><a onClick={this.handleOffset.bind(this, 10)}>+10</a></div>
          <div>{this.state.offsetTime}</div>
          <div><a onClick={this.handleOffset.bind(this, -10)}>-10</a></div>
        </div>
        <div onMouseUp={this.handleMouseup.bind(this)}>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur debitis delectus ducimus enim eveniet ex fugit illo ipsum itaque natus quibusdam quidem quisquam quod recusandae rem, repellat ullam, unde voluptatibus?
          </p>
          <p>
            onsectetur debitis delectus ducimus enim eveniet ex fugit illo ipsum itaque
          </p>
          <p>
            onsectetur debitis ipsum itaque ndae rem, repellat ullam,
          </p>
          { this.renderSubtitle() }
        </div>
        { !!this.state.selection && (
          <div className={style.searchWBox} style={{ top: this.state.selection.clientY, left: this.state.selection.clientX }}>
            <form id="wordSearch">
              <input ref="wordInput" type="text" value={this.state.selection.text} onChange={this.handleWordInput.bind(this)}/><a className="dictSearch">Search</a><a onClick={this.handleWordAdd.bind(this)} className="addTo">Add</a>
            </form>
          </div>
        )}
      </div>
    );
  }
}

Subtitle.defaultProps = {
  onPickWord({ word, sentence, x, y }) {
    console.log('params', word, sentence, x, y);
  },
}

Subtitle.propTypes = {
  subtitle: PropTypes.array.isRequired,
  onCentenceClick: PropTypes.func.isRequired,
}

export default Subtitle;
